<template>
  <view class="goodsList">
    <view class="list" v-for="item in dataList" :key="item.id">
      <view class="list-detail">
        <view class="imgs flex-middle">
          <img :src="item.pic" class="img" mode="aspectFit" />
        </view>
        <view class="info">
          <view>
            <text class="info-time">{{ item.send_at }}</text>
          </view>
          <view class="flex">
            <text class="info-num">x{{ item.order_num }}</text>
            <text class="info-pirce">￥{{ item.order_amount }}</text>
          </view>
          <view
            class="info-look"
            v-if="!item.lookDetail"
            @click="changeLookDetail(item)"
          >
            <text>展开详情</text>
            <u-icon name="arrow-down"></u-icon>
          </view>
          <view class="info-look" v-else @click="changeLookDetail(item)">
            <text>收起详情</text>
            <u-icon name="arrow-up"></u-icon>
          </view>
        </view>
      </view>
      <view class="info-good-wrap" v-if="item.lookDetail">
        <view class="info-goods" v-if="item.goods && item.goods.length">
          <p class="info-goods-name">商品</p>
          <view
            class="info-goods-list"
            v-for="goodsItem in item.goods"
            :key="goodsItem.goods_spu_id"
          >
            <text>{{ goodsItem.goods_name }}</text>
            <text class="mg-20">{{ goodsItem.num }}{{ goodsItem.unit }}</text>
            <text>￥{{ goodsItem.order_amount }}</text>
          </view>
        </view>
        <view
          class="info-goods"
          v-if="item.package_goods && item.package_goods.length"
        >
          <view
            v-for="goodsItem in item.package_goods"
            :key="goodsItem.goods_spu_id"
          >
            <p class="info-goods-name mg-t-20">{{ goodsItem.name }}/套餐</p>
            <view
              class="info-goods-list"
              v-for="packageItem in goodsItem.package_goods"
              :key="packageItem.goods_spu_id"
            >
              <text>{{ packageItem.goods_name }}</text>
              <text class="mg-20"
                >{{ packageItem.num }}{{ packageItem.unit }}</text
              >
              <text>￥{{ packageItem.order_amount }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view
      class="info-look change-all"
      v-if="!showAllData && list.length > 2"
      @click="changeAllData"
    >
      <text>展开更多</text>
      <u-icon name="arrow-down"></u-icon>
    </view>
    <view
      class="info-look change-all"
      v-if="showAllData && list.length > 2"
      @click="changeAllData"
    >
      <text>收起更多</text>
      <u-icon name="arrow-up"></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      showAllData: false,
    };
  },
  computed: {
    dataList() {
      return this.showAllData ? this.list : this.list.slice(0, 2);
    },
  },
  methods: {
    changeAllData() {
      this.showAllData = !this.showAllData;
    },
    //  查看详情
    changeLookDetail(item) {
      this.$set(item, "lookDetail", !item.lookDetail);
    },
  },
};
</script>

<style lang="scss" scoped>
.goodsList {
  margin: 0 40rpx 0 30rpx;
  font-size: 28rpx;
  border-bottom: 2rpx solid #e7e8e8;

  .list {
    margin-bottom: 20rpx;

    .imgs {
      width: 100rpx;
      height: 100rpx;
      margin-right: 30rpx;
      position: relative;

      .logo {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }

      .img {
        width: 100rpx;
        max-height: 100rpx;
      }
    }

    .info {
      .red {
        color: red;
        margin-right: 10rpx;
        font-size: 26rpx;
      }

      .red_tag {
        display: inline-block;
      }

      .yellow_tag {
        font-size: 20rpx;
        padding: 2rpx 12rpx;
        background: #ff9900;
        border-radius: 6rpx;
        color: #fff;
      }

      .spu {
        margin-left: 20rpx;
        padding: 0 8rpx;
        background: #e3e3e3;
        border-radius: 8rpx;
        font-size: 24rpx;
      }
    }
  }
}
.list {
  .list-detail {
    display: flex;
    width: 100%;
    .info {
      flex: 1;
    }
    .info-time {
      font-weight: bold;
      font-size: 30rpx;
      color: #000000;
    }
    .info-num {
      font-size: 24rpx;
      color: #999999;
    }
    .info-look {
      font-size: 24rpx;
      color: #333;
      margin-top: 29rpx;
      text {
        margin-right: 10rpx;
      }
    }
    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
  .info-pirce {
    color: #f55726;
    font-size: 36rpx;
  }
  .info-good-wrap {
    padding: 30rpx;
    background: #f8f9fa;
    border-radius: 20rpx;
    margin: 20rpx 0;
    .info-goods {
      .mg-t-20 {
        margin-top: 20rpx;
      }
      .info-goods-name {
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.95);
        font-weight: bold;
        margin-bottom: 20rpx;
      }
      .info-goods-list {
        margin: 20rpx 0;
        &:last-child {
          margin-bottom: 0;
        }
        display: flex;
        text:first-child {
          width: 45%;
        }
        text:nth-child(2) {
          width: 25%;
          padding-right: 10%;
          text-align: right;
        }
        text:last-child {
          flex: 1;
          text-align: right;
        }
      }
    }
  }
}
.change-all {
  display: flex;
  justify-content: center;
  margin-bottom: 28rpx;
}
</style>